<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>07_事件处理</title>
</head>

<body>
  <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

  <div id="example">

    <h2>1. 绑定监听</h2>
    <!-- 回调函数参数：event -->
    <button v-on:click="handleClick1">按钮1</button>
    <button @click="handleClick2">按钮2</button>
    <button @click="handleClick3">按钮3</button>
    <!-- 回调函数参数：111, 222, 333, 444 -->
    <button @click="handleClick4(111, 222, 333, 444)">按钮4</button>
    <!-- 回调函数参数：111, 222, 333, 444, event -->
    <button @click="handleClick5(111, 222, 333, 444, $event)">按钮5</button>
    <!-- 回调函数参数：没有参数 -->
    <button @click="handleClick6()">按钮6</button>

    <p>{{num}}</p>
    <button @click="handleClick7">按钮7</button>
    <!-- 
      如果函数只有一行代码，可以直接将代码写在回调函数位置，vue会自动生成函数执行这行代码 
      注意：在模板页面中不需要写this，所有数据都会自动去this上找
    -->
    <button @click="num++">按钮8</button>

    <h2>2. 事件修饰符</h2>
    <!-- 
      链接点击不要跳转
      表单点击不要提交表单
        阻止事件的默认行为
     -->
    <a href="http://www.atguigu.com" @click.prevent>尚硅谷</a>
    <form action="xxx">
      <button type="submit" @click.prevent="handleClick8">提交1</button>
    </form>
    <form action="xxx" @submit.prevent="handleClick8">
      <button type="submit">提交2</button>
    </form>

    <ul @click.self.once="handleClick9">
      <li>111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
      <li>555</li>
    </ul>

    <h2>3. 按键修饰符</h2>

    <input type="text" @keyup.13="handleKeyup" />
    <!-- 一般用enter，语义化更好 -->
    <input type="text" @keyup.enter="handleKeyup" />

  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    /*
      1. 事件回调函数写法：
        @click="xxx" 回调函数的参数为event
        @click="xxx(111, 222)" 回调函数的参数为111,222
        @click="xxx(111, 222, $event)" 回调函数的参数为111,222,event
        @click="xxx()" 回调函数的参数为空
        @click="xxx++" 如果函数只有一行代码，可以直接将代码写在回调函数位置
      
      2. 事件修饰符
        .prevent 阻止事件默认行为
        .stop    阻止事件冒泡
        .self    只有自身可以触发事件
        .once    事件只能触发一次
      
      3. 按键修饰符
    */
    new Vue({
      el: '#example',
      data: {
        num: 0
      },
      methods: {
        handleClick1() {
          // 在React中，普通函数this是undefined，箭头函数this才是实例对象
          // 在Vue中，所有函数this默认都指向实例对象vm
          console.log(this); // vm
        },
        handleClick2: () => {
          // 箭头函数的this是window，在严格模式下是undefined
          // 所以：在Vue中函数一般定义成普通函数形式
          console.log(this); // window
        },
        // handleClick3(...args) {
        //   console.log(args); // 真数组
        //   console.log(arguments); // 伪数组
        // }
        handleClick3(event) {
          // 回调函数默认参数和原生DOM事件一样，是event
        },
        handleClick4(...args) {
          console.log(args);
        },
        handleClick5(...args) {
          console.log(args);
        },
        handleClick6(...args) {
          console.log(args);
        },
        handleClick7() {
          this.num++
        },
        handleClick8(event) {
          // event.preventDefault()
        },
        handleClick9() {
          console.log('hello click');
        },
        handleKeyup(e) {
          // if (e.keyCode === 13) {
          console.log('enter');
          // }
        }
      }
    })
  </script>
</body>

</html>